<!-- 群体流动，详情 -->
<template>
    <div>
        <el-drawer :model-value="isDetailsShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
            <template #header>
                <h4>详情</h4>
            </template>
            <template #default>
                <el-form :model="companyInfo" label-width="100" style="max-width: 800px">
                    <el-form-item label="牛号">
                        <el-input disabled v-model="companyInfo.cowCode" />
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input disabled v-model="companyInfo.age" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input disabled v-model="companyInfo.genderName" />
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-input disabled v-model="companyInfo.birthday" />
                    </el-form-item>
                    <el-form-item label="品种">
                        <el-input disabled v-model="companyInfo.breed" />
                    </el-form-item>
                    <el-form-item label="初生体重(kg)">
                        <el-input disabled v-model="companyInfo.birthWeight" />
                    </el-form-item>
                    <el-form-item label="牛当前阶段">
                        <el-input disabled v-model="companyInfo.cowStatusName" />
                    </el-form-item>
                    <el-form-item label="入场日期">
                        <el-input disabled v-model="companyInfo.entryDate" />
                    </el-form-item>
                    <el-form-item label="离场日期">
                        <el-input disabled v-model="companyInfo.exitDate" />
                    </el-form-item>
                    <el-form-item label="离场原因">
                        <el-input disabled v-model="companyInfo.exitReason" />
                    </el-form-item>
                    <el-form-item label="是否在群">
                        <el-input disabled v-model="companyInfo.inGroupName" />
                    </el-form-item>
                    <el-form-item label="销售地区">
                        <el-input disabled v-model="companyInfo.saleArea" />
                    </el-form-item>
                    <el-form-item label="来源">
                        <el-input disabled v-model="companyInfo.source" />
                    </el-form-item>
                    <el-form-item label="断奶日期">
                        <el-input disabled v-model="companyInfo.weaningDate" />
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelHandler">关闭</el-button>
                </span>
            </template>
        </el-drawer>
    </div>
</template>
    
<script setup>
import { ref, onMounted, onUpdated } from 'vue'
import { reqGetCowMovementInfo } from '@/api/daily'
    
// 接收父组件传递过来的数据
let props = defineProps(['isDetailsShow', 'detailsId'])
    
// 注册自定义事件
let $emit = defineEmits(['closeDetailsDialog'])
    
// 通过id获取详情
const getCowMovementInfo = async() => {
    let res = await reqGetCowMovementInfo({
        id: props.detailsId
    })
    if(res.status == 200){
        Object.assign(companyInfo.value, res.data)
    }
}
    
// 收集表单信息
let companyInfo = ref({})
    
// 关闭按钮
const cancelHandler = () => {
    $emit('closeDetailsDialog', false)
}
    
// 组件挂载完毕
onMounted(() => {
        
})
    
// 组件更新
onUpdated(() => {
    getCowMovementInfo()
})
</script>
    
<style scoped lang="scss">

</style>